<template>
  <div class="list">
    <div class="filter">
        <header>全部图文</header>
        <table cellspacing='20'>

                <tr>
                    <td>文章状态：</td>
                    <td>
                        <ul class="clearfix" >
                            <li :class="[item.fontawesome,{active:current==index}]" v-for="(item, index) in items" :key="index" @click="addClass(index)">{{ item.content}}</li>
                        </ul>
                    </td>
                    </tr>
                <tr>
                    <td>频道列表：</td>
                    <td>
                        <el-select v-model="value" placeholder="请选择" @change="currentSel">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>时间选择：</td>
                    <td>
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                            v-model="time"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            type="datetimerange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['12:00:00']"
                            @change="chooseTimeRange"
                            >
                            </el-date-picker>
                        </div>
                    </td>
                </tr>
        </table>
     </div>
    <div class="result">
        <header>共找到{{totals?totals:'0'}}条符合条件的内容</header>
        <ul class="result-container">
            <li class="articles-item clearfix" v-for="(item,index) in resultList" :key='index'>
                <img :src="item.cover.images" alt="">
                <dl>
                    <dt>
                        <span>{{item.title}}</span>
                        <div>
                            <i data-type="modify" class="el-icon-edit">修改</i>
                            <i data-type="del" class="el-icon-delete">删除</i>
                        </div>
                    </dt>
                    <dd><span class="audit el-tag">待审核</span></dd>
                    <dd class="time">{{item.pubdate}}</dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="fenye">
        <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="totals">
        </el-pagination>
    </div>
</div>
</template>

<script>


export default {
  name: 'list',
  data(){
      return{
        current: 0,
        items: [
            { fontawesome: 'fa-comments-o', content: '全部' },
            { fontawesome: 'fa-envelope', content: '草稿' },
            { fontawesome: 'fa-address-book', content: '待审核' },
            { fontawesome: 'fa-history', content: '审核通过' },
            { fontawesome: 'fa-cogs', content: '审核失败' }
        ],
         options: [{
            value: '2',
            label: '开发者资讯'
            }, {
            value: '3',
            label: 'ios'
            }, {
            value: '4',
            label: 'c++'
            }, {
            value: '5',
            label: 'android'
            }, {
            value: '6',
            label: 'css'
            }, {
            value: '7',
            label: '数据库'
            }, {
            value: '8',
            label: 'go'
            }, {
            value: '9',
            label: '产品'
            }, {
            value: '10',
            label: '后端'
            }, {
            value: '11',
            label: 'linux'
            }
        ],
        value:'',
        time:'',
        resultList:[],
        totals:0,
        startpubdate:'',//时间开始
        endpubdate:'',//时间结束
        selValindex:'',
        statusIndex:''
        
      }
  },
  methods: {
    addClass (index) {
        this.current = index;
        this.statusIndex = index;
        let a = this.startpubdate;
        let b = this.endpubdate;
        let c = index-1<0?0:index-1;

        const params ={
            page: 1,
            per_page: 10,
            resetPage: true,
            status: c,
            // channel_id:this.selValindex,
            // begin_pubdate:a,
            // end_pubdate:b,
        }

      
      this.axios.get('/itcast/mp/v1_0/articles',
        {
            params:params,
            headers:{
                'Authorization':'Bearer '+this.$store.state.userInfo.token,
                'Content-Type':'application/json'
        }}).then((data)=>{
            this.resultList = data.data.data.results;
            this.totals = data.data.data.total_count;
        })
    },
    //频道列表
    currentSel(selVal){
        this.selValindex = selVal;
        let a = this.startpubdate;
        let b = this.endpubdate;
        let c = selVal;
        this.axios.get('/itcast/mp/v1_0/articles',
        {
            params:{
                page: 1,
                per_page: 10,
                channel_id:c,
                resetPage: true,
                begin_pubdate:a,
                end_pubdate:b
            },
            headers:{
                'Authorization':'Bearer '+this.$store.state.userInfo.token,
                'Content-Type':'application/json'
            }
        }).then((data)=>{
            this.resultList = data.data.data.results;
            this.totals = data.data.data.total_count;
        })
        
        
     },
    //获取筛选时间值
    chooseTimeRange(t) {
      //console.log(t);//结果为一个数组，如：["2018-08-04", "2018-08-06"]
      this.startpubdate = t[0];
      this.endpubdate = t[1];
      this.axios.get('/itcast/mp/v1_0/articles',
        {
            params:{
                page: 1,
                per_page: 10,
                resetPage: true,
                begin_pubdate:t[0],
                end_pubdate:t[1],
                channel_id:this.selValindex,
                status:this.statusIndex
            },
            headers:{
                'Authorization':'Bearer '+this.$store.state.userInfo.token,
                'Content-Type':'application/json'
        }}).then((data)=>{
            this.resultList = data.data.data.results;
            this.totals = data.data.data.total_count;
        })
    },
    //跳转第几页
    handleCurrentChange: function(currentPage){
        //console.log(currentPage)  //点击第几页
        this.axios.get('/itcast/mp/v1_0/articles',
        {
            params:{
                page: currentPage,
                per_page: 10
            },
            headers:{
                'Authorization':'Bearer '+this.$store.state.userInfo.token,
                'Content-Type':'application/json'
        }}).then((data)=>{
            this.resultList = data.data.data.results;
        })
    },
  },
  created(){
      this.axios.get('/itcast/mp/v1_0/articles',
      {
        params:{
            page: 1,
            per_page: 10
        },
         headers:{
            'Authorization':'Bearer '+this.$store.state.userInfo.token,
            'Content-Type':'application/json'
    }}).then((data)=>{
        this.resultList = data.data.data.results;
        this.totals = data.data.data.total_count;
    })
  }
}
</script>
<style lang="less" scoped>
.list{
    padding: 10px;
    .filter{
        background-color: #fff;
        text-align: left;
        border: 1px solid #e7e7e9;
        header{
            border-bottom: 1px dashed #ccc;
            margin: 0 5px;
            padding: 0 10px;
            font-size: 14px;
            height: 55px;
            line-height: 55px;
            color: #323745;
        }
        ul{
            li{
                float: left;
                margin-left: 10px;
                cursor: pointer;
            }
        }
        table{
            margin: 20px;
            border-collapse: collapse;
            td{
                padding: 10px;
            }
        }
    }
    .active{
        color: #3296fa;
    }
    .result{
        background-color: #fff;
        text-align: left;
        border: 1px solid #e7e7e9;
        margin-top: 10px;
        header{
            border-bottom: 1px dashed #ccc;
            margin: 0 5px;
            padding: 0 10px;
            font-size: 14px;
            height: 55px;
            line-height: 55px;
            color: #323745;
        }
        .result-container{
            li{
                overflow: hidden;
                padding: 15px 5px;
                margin: 0 10px;
                border-bottom: 1px solid #f2f3f5;
                img{
                    float: left;
                    width: 150px;
                    height: 100px;
                }
                dl{
                    margin-left: 160px;
                    text-align: left;
                    dt{
                        color: #333;
                        font-size: 14px;
                        margin: 0 0 7px;
                        div{
                            float: right;
                            i{
                                margin-left: 20px;
                                font-size: 12px;
                                cursor: pointer;
                            }
                        }
                    }
                    dd{
                        font-size: 12px;
                        margin: 5px 0;
                        color: #999;
                        .audit{
                            color: #35a011;
                            border-color: #35a011;
                            background: #fff;
                        }
                    }
                    .time{
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }
    .fenye{
        margin: 20px 0;
    }
}
</style>